<template>
  <div class="contentHeader">
    <div class="left">
      <i class="fa fa-bars menuShowIcon" @click="menuShowToggle"></i>
      <router-link to="/indexHome/nationwide/000000"><i class="fa fa-home"></i><span class="indexFont">主页</span></router-link>
    </div>
    <div class="right">
      <el-dropdown trigger="hover" @command="handleCommand">
                <span class="el-dropdown-link">
                    欢迎，{{ username }}<i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="loginout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'

  export default {
    computed: {
      ...mapState({
        menuShow: state => state.menuShow
      }),
      username () {
        let username = JSON.parse(sessionStorage.getItem('username'))
        if (username) {
          return username
        }
      }
    },
    methods: {
      menuShowToggle () {
        let store = this.$store
        this.menuShow === false ? store.dispatch('setMenuShow', true) : store.dispatch('setMenuShow', false)
        console.log(this.menuShow)
      },
      handleCommand (command) {
        if (command === 'loginout') {
          sessionStorage.removeItem('username')
          sessionStorage.removeItem('router')
          sessionStorage.removeItem('indexRouter')
          this.$router.push('/login')
          window.location.reload()
        }
      }
    }
  }
</script>
